<script setup>
import { useSysInfoStore } from '@/store/system'
import { getProfileAPI, uploadFileAPI, updateProfileAPI } from '@/api/profile'
import { ref } from 'vue';
import dayjs from 'dayjs'
const sysStore = useSysInfoStore()

// 获取旧数据
const profile = ref({})
const getProfile = async () => {
  const { result } = await getProfileAPI()
  profile.value = result
}
getProfile()

// 上传头像
const onUploadFile = async () => {
  // 让用户选图片
  const res = await uni.chooseMedia({
    count: 1,
    mediaType: ['image']
  })
  console.log('用户选择图片', res);
  // 准备调用上传接口, 发送请求, 注意观察响应数据结构
  const { data } = await uploadFileAPI(res.tempFiles[0].tempFilePath)
  const { result } = JSON.parse(data)
  // 修改后头像替换旧头像
  profile.value.avatar = result.avatar
}

// 保存信息
const updateProfile = async () => {
  const {result} = await updateProfileAPI(profile.value)
  console.log(result);
  uni.showToast({
    title: '修改成功'
  })
  setTimeout(() => {
    uni.navigateBack()
  }, 1000);
}

// 更新性别
const updateGender = (ev) => {
  console.log(ev);
  profile.value.gender = ev.detail.value
}

// 处理生日选项, 不能选超过当前的日期
const end = ref(dayjs().format('YYYY-MM-DD'))

// 处理城市
const updateCity = (ev) => {
  console.log(ev.detail);
  // value则是中文名数组, 给人看的
  profile.value.fullLocation = ev.detail.value.join(' ')
  // 可以拿到 code 是省市区代码数组, 给后端发请求用的
  profile.value.provinceCode = ev.detail.code[0]
  profile.value.cityCode = ev.detail.code[1]
  profile.value.countyCode = ev.detail.code[2]
}

// 回退按钮
const goBack = () => {
  uni.navigateBack()
}
</script>

<template>
  <view class="viewport">
    <!-- 顶部背景 -->
    <view class="navbar" :style="{ paddingTop: sysStore.safeArea.top + 'px' }">
      <view @tap="goBack" class="back icon-left"></view>
      <view class="title">个人信息</view>
    </view>
    <scroll-view scroll-y>
      <!-- 头像 -->
      <view class="avatar" @tap="onUploadFile">
        <image mode="aspectFill" :src="profile.avatar" />
        <text>点击修改头像</text>
      </view>
      <view class="form">
        <view class="form-item">
          <text class="label">账号</text>
          <!-- 账号名不能修改，用 text 组件展示 -->
          <text>{{ profile.account }}</text>
        </view>
        <view class="form-item">
          <text class="label">昵称</text>
          <!-- 输入框通过 v-model 双向绑定修改数据 -->
          <input v-model="profile.nickname" />
        </view>
        <view class="form-item">
          <text class="label">性别</text>
          <radio-group @change="updateGender">
            <label class="radio">
              <radio value="男" color="#27ba9b" :checked="profile.gender === '男'" />
              男
            </label>
            <label class="radio">
              <radio value="女" color="#27ba9b" :checked="profile.gender === '女'" />
              女
            </label>
          </radio-group>
        </view>
        <view class="form-item">
          <text class="label">出生日期</text>
          <picker mode="date" start="1900-01-01" :end="end" :value="profile.birthday" @change="profile.birthday = $event.detail.value">
            <view>{{ profile.birthday || "请选择日期" }}</view>
          </picker>
        </view>
        <view class="form-item">
          <text class="label">城市</text>
          <picker mode="region" @change="updateCity">
            <view>{{ profile.fullLocation || "请选择城市" }}</view>
          </picker>
        </view>
        <view class="form-item">
          <text class="label">职业</text>
          <!-- 输入框通过 v-model 双向绑定修改数据 -->
          <input v-model="profile.profession" placeholder="请填写职业" />
        </view>
        <!-- 提交按钮 -->
        <view class="button" @tap="updateProfile">保 存</view>
      </view>
    </scroll-view>
  </view>
</template>

<style lang="scss">
page {
  height: 100%;
  overflow: hidden;
  background-color: #f4f4f4;
}

.viewport {
  display: flex;
  flex-direction: column;
  height: 100%;
  background-image: url(https://static.botue.com/erabbit/static/images/order_bg.png);
  background-size: auto 392rpx;
  background-repeat: no-repeat;
}

.navbar {
  .title {
    height: 40px;
    line-height: 32px;
    text-align: center;
    font-size: 17px;
    font-weight: 500;
    color: #fff;
  }

  .back {
    position: absolute;
    left: 20rpx;
    top: 22px;
    font-size: 23px;
    z-index: 9;
    color: #fff;
  }
}

.avatar {
  text-align: center;
  padding: 20rpx 0 40rpx;

  image {
    width: 160rpx;
    height: 160rpx;
    border-radius: 50%;
  }

  text {
    display: block;
    padding-top: 20rpx;
    line-height: 1;
    font-size: 26rpx;
    color: #fff;
  }
}

.form {
  margin: 20rpx 20rpx 0;
  padding: 0 20rpx;
  border-radius: 10rpx;
  background-color: #fff;

  .form-item {
    display: flex;
    height: 96rpx;
    line-height: 46rpx;
    padding: 25rpx 10rpx;
    background-color: #fff;
    font-size: 28rpx;
    border-bottom: 1rpx solid #ddd;

    &:last-child {
      border: none;
    }

    .label {
      width: 180rpx;
      color: #333;
    }

    input {
      flex: 1;
      display: block;
      height: 46rpx;
    }

    .radio {
      display: inline-block;
      height: 46rpx;
      margin-right: 20rpx;
      vertical-align: middle;
    }

    radio {
      transform: scale(0.7) translateY(-2px);
    }

    picker {
      flex: 1;
    }
  }
}

.button {
  height: 80rpx;
  text-align: center;
  line-height: 80rpx;
  margin: 30rpx 20rpx;
  color: #fff;
  border-radius: 80rpx;
  font-size: 30rpx;
  background-color: #27ba9b;
}</style>